<template>
    <div>
        <div class="personal-center">
            <div class="user-pic">
                <img :src="user.head_img" alt="">
            </div>
            <div class="user-info">
                <h5><i class="iconfont" :class="user.gender == 0 ? 'iconxingbienv col_pink':'iconxingbienan col_blue'" ></i><span>{{user.nickname}}</span></h5>
                <span>{{user.create_date}}</span>
            </div>
            <div class="to-edit" @click="$router.push({name:'editInfo'})">
                <i class="iconfont iconjiantou1"></i>
            </div>
        </div>
        <div class="myself">
            <AboutMe name="我的关注" desc="关注的用户" @toClick="$router.push({name:'myFollow'})"/>
            <AboutMe name="我的跟帖" desc="跟帖/回复" @toClick="$router.push({name:'myPost'})"/>
            <AboutMe name="我的收藏" desc="文章/视频" @toClick="$router.push({name:'myCollection'})"/>
            <AboutMe name="回到首页" desc="♪(^∇^*)" @toClick="$router.push('/')"/>
            <!-- <AboutMe name="设置" desc=""/> -->
            <AboutMe name="退出" desc="" @toClick="logout"/>
        </div>
    </div>
</template>

<script>
import AboutMe from '../../components/AboutMe'
export default {
    data(){
        return{
            user:{}
        }
    },
    components:{
        AboutMe
    },
    methods:{
        getUserInfo(){
            //从本地储存中获取userId
            this.$axios({
                url:'/user/'+ localStorage.getItem('userId'),
                method:'get'
            }).then(res => {
                this.user = res.data.data;
                this.user.head_img = this.user.head_img ? this.$axios.defaults.baseURL+this.user.head_img:'../../assets/user1.jpg';
                this.user.create_date = this.user.create_date ? this.user.create_date.split('T')[0] :'';
            });
        },
        logout(){
            localStorage.removeItem('token');
            localStorage.removeItem('userId');
            // replace和push的区别在于push会把新的路由添加到最后一位，而replace会替换最后的路由
            this.$router.replace('/login');
            this.$toast('已退出');
        }
    },
    mounted(){
         this.getUserInfo();
    }
}
</script>

<style lang="less" scoped>
.personal-center{
    display: flex;
    height: 36.111vw;
    line-height: 36.111vw;
    border-bottom: 1.389vw solid #E4E4E4;
    .user-pic{
        flex:2;
        padding-left: 6.111vw;
        img{
            width: 19.444vw;
            height: 19.444vw;
            border-radius: 50%;
            vertical-align: middle;
        }
    }
    .user-info{
        flex:7;
        line-height: 1.15;
        padding:13.889vw 0 11.111vw 0;
        padding-left: 4.167vw;
        h5{
           padding-bottom: 2.222vw;
           font-size: 4.444vw;
           font-weight: 400;
           color: #333333;
           .iconfont{
               //color: #75B9EB;
               font-size: 4.444vw;
           }
        }
        >span{
           font-size: 3.889vw;  
           color: #A1A1A1;
        }
    }
    .to-edit{
        flex:1;
        .iconfont{
            color:#c0c0c0;
        }
    }
}
.myself{
    padding-left:6.111vw;//22
}
.col_pink{
   color:#ffc0cb;
}
.col_blue{
    color: #87ceeb;
}
</style>